<template>
  <div class="home">
    <div class="banner">
      <div class="panelBox bannerHeader">
        <div class="t1">让政策支持企业更简单</div>
        <div class="t2">让企业精准匹配政策，让政策助力企业发展</div>
      </div>
      <div class="bannerBottom">
        <div class="panelBox bottomBox">
          <div class="bannerBottomItem">
            <div class="bannerItemLeft">
              <img src="@/assets/home/icon1.png" alt="">
            </div>
            <div class="bannerItemRight">
              <div class="rightT1 fontFamilyBold">开放生态</div>
              <div class="rightT2">建议开放合作模式，共同丰富完善生态系统</div>
            </div>
          </div>
          <div class="split"></div>
          <div class="bannerBottomItem">
            <div class="bannerItemLeft">
              <img src="@/assets/home/icon2.png" alt="">
            </div>
            <div class="bannerItemRight">
              <div class="rightT1 fontFamilyBold">安全保障</div>
              <div class="rightT2">确保安全性和稳定性，保护用户数据交易安全</div>
            </div>
          </div>
          <div class="split"></div>
          <div class="bannerBottomItem">
            <div class="bannerItemLeft">
              <img src="@/assets/home/icon3.png" alt="">
            </div>
            <div class="bannerItemRight">
              <div class="rightT1 fontFamilyBold">正规平台</div>
              <div class="rightT2">国资背景，税务局授权，保障企业降低用工成本</div>
            </div>
          </div>
          <div class="split"></div>
          <div class="bannerBottomItem">
            <div class="bannerItemLeft">
              <img src="@/assets/home/icon4.png" alt="">
            </div>
            <div class="bannerItemRight">
              <div class="rightT1 fontFamilyBold">合法合规</div>
              <div class="rightT2">国家支持零工经济发展，四六合一，全程可追溯</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <h1 class="h1 fontFamilyMedium">可信赖、安全、稳定的平台服务</h1>
    <div class="serviceBox panelBox">
      <div class="serviceC">
        <div class="serviceItem serviceItem_2">
          <div class="serviceTitle">个体工商户</div>
          <div class="serviceContent">帮助创业者在线注册&管理个体户</div>
        </div>
        <div class="serviceItem serviceItem_3">
          <div class="serviceTitle">灵工撮合</div>
          <div class="serviceContent">撮合企业与业务人员，为业务人员提供按次申报，一票清税等服务</div>
        </div>
      </div>
      <div class="serviceCenter serviceItem_1">
        <div class="serviceTitle">灵活用工</div>
        <div class="serviceContent">帮助雇主从“标准雇佣关系"进入灵活多样的用工模式,按需雇佣人才,为企业降本增效</div>
      </div>
      <div class="serviceC">
        <div class="serviceItem serviceItem_4">
          <div class="serviceTitle">立减金</div>
          <div class="serviceContent">白条入账，解决企业营销发票难题</div>
        </div>
        <div class="serviceItem serviceItem_5">
          <div class="serviceTitle">税务咨询</div>
          <div class="serviceContent">合理利用税收优惠政策，有效降低企业税负</div>
        </div>
      </div>
    </div>
    <h1 class="h1 fontFamilyMedium">全行业解决方案</h1>
    <div class="panelBox programmeBox">
      <div class="programmeItem" v-for="item in programmeList" :class="{active: selectedProgramme == item.id}"
           @mouseenter="changeProgramme(item.id)"
           :style="{backgroundImage: `url(${selectedProgramme == item.id ? item.imgActive: item.img})`}">
        <span>{{item.title}}</span>
        <span class="c1"></span>
        <span class="c2"></span>
        <span class="c3"></span>
      </div>
    </div>
<!--    <h1 class="h1">税务咨询</h1>-->
<!--    <div class="information">-->
<!--      <div class="informationLeft">-->
<!--        <div class="informationLeftList"></div>-->
<!--      </div>-->
<!--      <div class="informationRight"></div>-->
<!--    </div>-->
    <div class="partnerBox">
      <h1 class="h1 fontFamilyMedium">合作伙伴</h1>
      <div class="partnerList">
        <div class="partnerItem" v-for="item in partnerList">
          <img :src="item.url" alt="">
        </div>
      </div>
    </div>
    <img src="@/assets/home/banner2.png" alt="" class="banner2">
  </div>
</template>

<script>
	export default {
		name: "index",
		data() {
			return {
				programmeList: [
					{
						img: require('@/assets/home/programmeBg1.png'),
						imgActive: require('@/assets/home/programmeBgActive1.png'),
						id: 1,
						title: '即时配送'
					},
					{
						img: require('@/assets/home/programmeBg2.png'),
						imgActive: require('@/assets/home/programmeBgActive2.png'),
						id: 2,
						title: '家政服务'
					},
					{
						img: require('@/assets/home/programmeBg3.png'),
						imgActive: require('@/assets/home/programmeBgActive3.png'),
						id: 3,
						title: '房产销售'
					},
					{
						img: require('@/assets/home/programmeBg4.png'),
						imgActive: require('@/assets/home/programmeBgActive4.png'),
						id: 4,
						title: '出行行业'
					},
					{
						img: require('@/assets/home/programmeBg5.png'),
						imgActive: require('@/assets/home/programmeBgActive5.png'),
						id: 5,
						title: '社区团购'
					},
					{
						img: require('@/assets/home/programmeBg6.png'),
						imgActive: require('@/assets/home/programmeBgActive6.png'),
						id: 6,
						title: '在线教育'
					},
					{
						img: require('@/assets/home/programmeBg7.png'),
						imgActive: require('@/assets/home/programmeBgActive7.png'),
						id: 7,
						title: '文化传媒'
					},
					{
						img: require('@/assets/home/programmeBg8.png'),
						imgActive: require('@/assets/home/programmeBgActive8.png'),
						id: 8,
						title: '零售行业'
					},
				],
				selectedProgramme: 1,
				partnerList: [
          {url: require('@/assets/cooperative/img1.png')},
          {url: require('@/assets/cooperative/img2.png')},
          {url: require('@/assets/cooperative/img3.png')},
          {url: require('@/assets/cooperative/img4.png')},
          {url: require('@/assets/cooperative/img5.png')},
          {url: require('@/assets/cooperative/img6.png')},
          {url: require('@/assets/cooperative/img7.png')},
          {url: require('@/assets/cooperative/img8.png')},
          {url: require('@/assets/cooperative/img9.png')},
          {url: require('@/assets/cooperative/img10.png')},
          {url: require('@/assets/cooperative/img11.png')},
          {url: require('@/assets/cooperative/img12.png')},
          {url: require('@/assets/cooperative/img13.png')},
          {url: require('@/assets/cooperative/img14.png')},
          {url: require('@/assets/cooperative/img15.png')},
          {url: require('@/assets/cooperative/img16.png')},
          {url: require('@/assets/cooperative/img17.png')},
          {url: require('@/assets/cooperative/img18.png')},
        ]
			};
		},
		computed: {},
		methods: {
			changeProgramme(selectedProgramme) {
				this.selectedProgramme = selectedProgramme;
			}
		},
		watch: {},
		mounted() {
		},
		created() {
		}
	}
</script>

<style scoped lang="less" src="@/style/home/index.less">

</style>
